<template>
	<div class="web">
		<!-- logo -->
		<logo></logo>
		<!-- title -->
		<div class="type">
			<span>从欢遇APP的10000名优质异性嘉宾中为你找到桃花运势相近的TA们！</span>
		</div>
		<!-- cloud -->
		<cloud2></cloud2>
		<!-- 丘比特 -->
		<div class="cupid">
			<div class="cupid_l"></div>
			<div class="cupid_r"></div>
		</div>
		<!-- 卡片 -->
		<card></card>
	</div>
</template>

<script>
	import logo from "@/components/base/logo.vue";
	import cloud2 from "@/components/base/cloud-2.vue";
	import card from "@/components/base/card.vue";
	
	export default{
		components:{
			logo,
			cloud2,
			card
		}
	}
</script>

<style lang="scss" scoped>
	@function px2vw($px){
		@return $px/7.5*1vw
	};
	.web{
		position: relative;
		width: 100vw;
		height: 100vh;
		background-image: url(../images/backgroundimg.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-top: px2vw(141);
	}
	.cupid{
		width: px2vw(680);
		height: px2vw(80);
		z-index: 99;
		
		position: absolute;
		left: 50%;
		margin-left: px2vw(-340);
		top: px2vw(238);
		&::after{
			content: '';
			display: block;
			clear: both;
		}
	}
	.cupid_l{
		width: px2vw(129);
		height: px2vw(78);
		float: left;
		
		background-image: url(../images/images/newqubit1_03.png);
		background-repeat: no-repeat;
		background-size: px2vw(129) px2vw(78);
	}
	.cupid_r{
		width: px2vw(129);
		height: px2vw(79);
		float: right;
		
		background-image: url(../images/images/newqubit2_03.png);
		background-repeat: no-repeat;
		background-size: px2vw(129) px2vw(79);
	}
	.type{
		width: px2vw(456);
		font-size: px2vw(26.04);
		color: #fff;
		font-weight: 300;
		line-height: px2vw(46);
		text-align: center;
		letter-spacing:0.4px;
		
		position: absolute;
		left: 50%;
		margin-left: px2vw(-228);
		top: px2vw(165);
	}
	
</style>
